<template>
  <div>
    <div class="class_mid">
         <van-nav-bar
      title="考试记录"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
      style="width:100%"
    />
    </div>
    <van-list class="two" >
      <van-list
        v-model="newloading"
        :finished="newfinished"
        finished-text="没有更多了"
        :offset="0"
        @load="newonLoad">
        <van-cell v-for="item in studentList" :key="item.id" @click="toDetailExem(item.id)">
          <div slot="title" class="img">
            <img :src="'http://upenglish.ayvvv.cn'+ item.testpaperimage" alt="">
          </div>
          <div slot="default" class="history">
            <div class="history-title">
              <p>{{ item.testpapername }}</p>
            </div>
            <div class="history-author">
              <span class="zhou">得分：{{ item.userscore }}</span>
              <span class="history-time">{{ item.createtime | dateFormat }}</span>
            </div>
          </div>
        </van-cell>
      </van-list>
    </van-list>
  </div>
</template>

<script>
import { student } from '@/api/user.js'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      studentList: [],
      newloading: false,
      newfinished: false,
      page: 1,
      alltestlist: []
    }
  },

  created () {
    this.loadStudent()
  },
  computed: {
    ...mapState(['id'])
  },
  methods: {
    async loadStudent () {
      const { data } = await student({
        userid: this.id,
        page: 1
      })
      console.log(data)
      this.studentList = data.result.data
    },
    toDetailExem (id) {
      this.$router.push({ path: `/exemStudy/${id}` })
    },
    async newonLoad () {
      const data = await student({
        userid: this.id,
        page: this.page
      })
      this.alltestlist.push(...data.data.result.data)
      this.studentList = [...new Set(this.alltestlist)]
      this.newloading = false
      if (this.page < data.data.result.last_page) {
        this.page++
      }
      if (this.studentList.length >= data.data.result.total) {
        this.newfinished = true
      }
    }
  }
}
</script>

<style scoped lang='less'>
.van-cell {
  box-shadow: 0px 0px 10px #ccc;
  margin-bottom: 30px;
}
.history {
  width: 100%;
  height: 200px;
  .history-title {
    padding: 15px;
    height: 160px;
    p {
      font-size: 30px;
      font-weight: 700;
    }
  }
  .history-author {
    position: relative;
    .zhou {
      position: absolute;
      top: -100px;
      right: 15px;
    }
    .history-time {
      position: absolute;
      bottom: 0px;
      right: 15px;
      font-size: 12px;
    }
    .shang {
      position: absolute;
      top: -40px;
      right: 15px;
      font-style: 12px;
    }
  }
}
.img img {
  width: 350px;
  height: 200px;
}
</style>
